<template>
    <div>
        <div :style="{padding: '24px', minHeight: '480px', background: '#fff'}">
            <div style="margin-bottom: 10px">
                <label style="margin: auto 10px;color: #f00">来源:</label>
                <el-button size="small" @click="searchType(null)" :type="queryParams.type==null?'success':''">不限</el-button>
                <el-button size="small" @click="searchType(1)" :type="queryParams.type==1?'success':''">自有</el-button>
                <el-button size="small" @click="searchType(2)" :type="queryParams.type==2?'success':''">好友</el-button> <el-button size="small" @click="searchType(3)" :type="queryParams.type==3?'success':''">分销</el-button>
                <el-divider direction="vertical"></el-divider>
                <label style="margin: auto 10px;color: #f00">类型:</label>
                <el-button size="small" @click="searchSource(null)" :type="queryParams.source==null?'success':''">不限</el-button>
                <el-button size="small" @click="searchSource(1)" :type="queryParams.source==1?'success':''">手动出库<el-badge :value="changeData.source1"></el-badge>
                </el-button>
                <el-button size="small" @click="searchSource(2)" :type="queryParams.source==2?'success':''">手动入库<el-badge :value="changeData.source2"></el-badge>
                </el-button>
                <el-button size="small" @click="searchSource(3)" :type="queryParams.source==3?'success':''">分拣扣除<el-badge :value="changeData.source3"></el-badge>
                </el-button>
                <el-button size="small" @click="searchSource(4)" :type="queryParams.source==4?'success':''">分拣退回<el-badge :value="changeData.source4"></el-badge>
                </el-button>
                <el-button size="small" @click="searchSource(5)" :type="queryParams.source==5?'success':''">虾皮退货/入库<el-badge :value="changeData.source5"></el-badge>
                </el-button>
                <el-button size="small" @click="searchSource(6)" :type="queryParams.source==6?'success':''">上架入库<el-badge :value="changeData.source6"></el-badge>
                </el-button>
                <el-button icon="el-icon-refresh" circle @click="refreshData" :loading="dataLoading"></el-button>
            </div>
            <div style="margin-bottom: 10px">
                <label style="margin: auto 10px;color: #f00">好友:</label>
                <el-input size="small" v-model="queryParams.toUserId" style="width: 120px" placeholder="好友ID" @keyup.enter.native="search()"></el-input>
                <label style="margin: auto 10px;color: #f00">sku编码:</label>
                <el-input size="small" v-model="queryParams.skuCode" style="width: 180px" placeholder="skuCode" @keyup.enter.native="search()"></el-input>
                 <label style="margin: auto 10px;color: #f00">备注:</label>
                <el-input size="small" v-model="queryParams.remark" style="width: 180px" placeholder="remark" @keyup.enter.native="search()"></el-input>
                <el-divider direction="vertical"></el-divider>
                <label style="margin: auto 10px;color: #f00">数量:</label>
                <el-input size="small" v-model="queryParams.minStock" @keyup.enter.native="search()" placeholder="最小" style="width: 80px" />
                <el-input size="small" v-model="queryParams.maxStock" @keyup.enter.native="search()" placeholder="最大" style="width: 80px" />
                <el-divider direction="vertical"></el-divider>
                <label style="margin: auto 10px;color: #f00">发生时间:</label>
                <el-date-picker @change="cbtime" v-model="others.createTime" type="daterange" align="right" unlink-panels range-separator="-" style="width: 220px" :start-placeholder="$t('开始日期')" size="small" value-format="yyyy-MM-dd" :end-placeholder="$t('结束日期')">
                </el-date-picker>
                <el-button @click="search" size="small" type="primary">搜索</el-button>
                <el-button @click="reset" size="small">重置</el-button>
            </div>
            <el-row :style="{marginBottom:'15px',marginTop:'15px'}">
                <font color="#f00">{{$t("仓库筛选")}}：</font>
                <el-button :type="queryParams.warehouseId==null?'danger':'default'" @click="fitlerWarehouse(null)" size="small">全部</el-button>
                <el-button size="small" v-for="ware in warehouses" :key="ware.id" :type="queryParams.warehouseId==ware.id?'success':'default'" @click="fitlerWarehouse(ware)">{{ware.name}}</el-button>
                <el-button type="danger" :loading="loadingWarehouse" @click="getWarehouses" size="small">获取仓库信息</el-button>
                <div style="float:right">
                    <el-button type="danger" @click="exportSource2" size="small">导出Excel</el-button>
                    <el-button type="danger" @click="exportSource" size="small">导出手动汇总</el-button>
                    <el-tooltip class="item" effect="dark" content="导出只能根据时间跟仓库" placement="right">
                        <i class="el-icon-info"></i>
                    </el-tooltip>
                </div>
            </el-row>
            <Table :loading="loading" :columns="columns" :data="storageProductChanges" border>
            </Table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :page-size="page.pageSize" show-total :total="page.total" :current="page.current" @on-change="changePage"></Page>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import api from "@/api/api"
import {searchStorageProductChangeList,getWmsList}  from "@/api/ProductApi"
import { getRand } from "@/utils/random"
import { signGetParams } from '@/utils/sign'
export default {
    name: 'CStorageProductChange',
    data() {
        return {
            dataLoading: false,
            changeData: {
                source1: 0,
                source2: 0,
                source3: 0,
                source4: 0,
                source5: 0,
                source6: 0,
            },
            loading: false,

            loadingWarehouse: false,
            queryParams: {
                btime: null,
                toUserId: null,
                etime: null,
                source: null,
                type: null,
                skuCode: null,
                minStock: null,
                maxStock: null,
                warehouseId: null,

            },
            warehouses: [],
            others: {
                createTime: [],
            },
            storageProductChange: {

            },
            page: {
                total: 0,
                current: 1,
                pageSize: 10
            },
            storageProductChanges: [

            ],

            columns: [{
                    title: '时间',
                    key: 'createTime',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        var me = this;
                        return h("div", [
                            h("span", { style: {} }, me.long2datetime(params.row.createAt))
                        ]);
                    }
                }, {

                    title: '商品名',
                    key: 'productName',
                    width: 180,
                    align: 'center',
                    render: (h, params) => {
                        var me = this;
                        return h("div", [
                            h("div", { style: { color: "#f00", marginBottom: "5px" } }, "【" + params.row.warehouseName + "】"),
                            h("div", { style: {} }, params.row.productName)

                        ]);
                    }
                }, {

                    title: '规格属性',
                    key: 'variationName',
                    width: 130,
                    align: 'center'
                }, {

                    title: 'sku编码',
                    key: 'skuCode',
                    width: 130,
                    align: 'center',
                    render: (h, params) => {
                        var me = this;
                        return h("div", [
                            h("div", {
                                style: {},
                                on: {
                                    click: () => {
                                        me.queryParams.skuCode = params.row.skuCode;
                                        me.search();
                                    }
                                }
                            }, params.row.skuCode)

                        ]);
                    }
                }, {
                    title: '变更前',
                    key: 'quantityBefore',
                    width: 130,
                    align: 'center'
                }, {
                    title: '变更数量',
                    key: 'changeQuantity',
                    width: 130,
                    align: 'center'
                }, {
                    title: '变更后',
                    key: 'quantityAfter',
                    width: 130,
                    align: 'center'
                },{
                    title: '总库存变更前',
                    key: 'allQuantityBefore',
                    width: 130,
                    align: 'center'
                }, {
                    title: '变更数量',
                    key: 'changeQuantity',
                    width: 130,
                    align: 'center'
                }, {
                    title: '总库存变更后',
                    key: 'allQuantityAfter',
                    width: 130,
                    align: 'center'
                }, {
                    title: '备注',

                    key: 'remark',
                    align: 'center'
                }

            ]
        };
    },
    props: [

    ],
    mounted: function() {
        this.getList();
        this.getWarehouses();
        this.search();
    },
    computed: {

    },
    methods: {
        exportSource: function() {
            //到
            var url = (process.env.NODE_ENV == 'production' ? api.root : api.testRoot) + "/storageproduct/exportChange.do?";
            let params = this.queryParams;
            params.nonceStr = getRand();
            let dt = signGetParams(params);
            url += dt;
            params.nonceStr = "";
            window.open(url.substring(0, url.length));
        },
        exportSource2: function() {
            var url = (process.env.NODE_ENV == 'production' ? api.root : api.testRoot) + "/storageproduct/exportChangeList.do?";
            let params = this.queryParams;
            params.nonceStr = getRand();
            let dt = signGetParams(params);
            url += dt;
            params.nonceStr = "";
            window.open(url.substring(0, url.length));
        },
        refreshData: function() {
            var me = this;
            me.dataLoading = true;
            me.$http.post("/storageproduct/changeStatistics.do", me.queryParams).then(response => {
                me.dataLoading = false;
                var body = response;
                if (body.status == 0) {

                    me.changeData = body.obj;

                }

            }, response => {
                me.dataLoading = false;
            });
        },
        fitlerWarehouse: function(ware) {
            if (ware) {
                this.queryParams.warehouseId = ware.warehouseId;
            } else {
                this.queryParams.warehouseId = null;

            }
            this.search();
        },
        getWarehouses: function() {
            var me = this;
            me.loadingWarehouse = true;

            getWmsList({}).then(response => {
                me.loadingWarehouse = false;
                var body = response;
                if (body.status == 0) {

                    me.warehouses = body.obj;

                } else {
                    me.errorMessage(body.info);
                }

            }, response => {
                me.loadingWarehouse = false;
            });
        },
        cbtime: function(value) {
            //创建时间
            if (value) {
                this.queryParams.btime = value[0];
                this.queryParams.etime = value[1];
            } else {
                this.queryParams.btime = "";
                this.queryParams.etime = "";
            }

        },
        searchSource: function(source) {
            this.queryParams.source = source;
            this.search();
        },
        searchType: function(type) {
            this.queryParams.type = type;
            this.search();
        },
        search: function() {
            this.page.current = 1;
            this.page.total = 0;
            this.getList();
            this.refreshData();
        },
        reset: function() {
            this.others.createTime = [];
            this.queryParams = {
                toUserId: null,
                btime: null,
                etime: null,
                source: null,
                type: null,
            };
            this.search();
        },
        changePage(current) {
            this.page.current = current;
            this.getList();
        },
        getList: function() {
            var me = this;
            var params = me.queryParams;
            params.current = me.page.current;
            params.pageSize = me.page.pageSize;
            params.productId = me.productId;
            me.loading = true;
            searchStorageProductChangeList(params).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.page.total = body.obj.totalCount;
                    me.storageProductChanges = body.obj.list;

                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        },
        showModal: function(val) {
            if (val) {
                this.getList();
            }

        },
        cancel: function() {
            this.$emit("ok")
        }
    }
}
</script>